<template>
  <div>
    <CloudDropdownButton @click="handleButtonClick">
      Dropdown
      <CloudMenu slot="overlay" @click="handleMenuClick">
        <CloudMenuItem key="1"> <CloudIcon type="user" />1st menu item </CloudMenuItem>
        <CloudMenuItem key="2"> <CloudIcon type="user" />2nd menu item </CloudMenuItem>
        <CloudMenuItem key="3"> <CloudIcon type="user" />3rd item </CloudMenuItem>
      </CloudMenu>
    </CloudDropdownButton>
    <CloudDropdownButton>
      Dropdown
      <CloudMenu slot="overlay" @click="handleMenuClick">
        <CloudMenuItem key="1"> <CloudIcon type="user" />1st menu item </CloudMenuItem>
        <CloudMenuItem key="2"> <CloudIcon type="user" />2nd menu item </CloudMenuItem>
        <CloudMenuItem key="3"> <CloudIcon type="user" />3rd item </CloudMenuItem>
      </CloudMenu>
      <CloudIcon slot="icon" type="user" />
    </CloudDropdownButton>
    <CloudDropdownButton disabled style="margin-left: 8px" @click="handleButtonClick">
      Dropdown
      <CloudMenu slot="overlay" @click="handleMenuClick">
        <CloudMenuItem key="1"> <CloudIcon type="user" />1st menu item </CloudMenuItem>
        <CloudMenuItem key="2"> <CloudIcon type="user" />2nd menu item </CloudMenuItem>
        <CloudMenuItem key="3"> <CloudIcon type="user" />3rd item </CloudMenuItem>
      </CloudMenu>
    </CloudDropdownButton>
    <CloudDropdown>
      <CloudMenu slot="overlay" @click="handleMenuClick">
        <CloudMenuItem key="1"> <CloudIcon type="user" />1st menu item </CloudMenuItem>
        <CloudMenuItem key="2"> <CloudIcon type="user" />2nd menu item </CloudMenuItem>
        <CloudMenuItem key="3"> <CloudIcon type="user" />3rd item </CloudMenuItem>
      </CloudMenu>
      <CloudButton style="margin-left: 8px"> Button <CloudIcon type="down" /> </CloudButton>
    </CloudDropdown>
  </div>
</template>

<script>
export default {
  title: '2.带下拉框的按钮',
  methods: {
    handleButtonClick(e) {
      console.log('click left button', e);
    },
    handleMenuClick(e) {
      console.log('click', e);
    },
  },
};
</script>